<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>充电规划 - 兰博劳斯</title>
    <link rel="shortcut icon" href="/static/images/gt_favicon.png">

    <link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">

    <!-- Custom styles for our template -->

    <link rel="stylesheet" href="/static/css/bootstrap-theme.css" media="screen">
    <link rel="stylesheet" href="/static/css/main.css">
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/static/js/html5shiv.js"></script>
    <script src="/static/js/respond.min.js"></script>
    <![endif]-->
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
        }

        #nav {
            height: 50px;
            background-color: #46474a;
        }

        #nav ul li {
            width: 120px;
            float: left;
        }

        #nav ul li a {
            display: block;
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            font-size: 18px;
            /* font-weight: bold; */
            color: white;
            text-align: center;
        }

        #nav ul li a:hover {
            background-color: white;
            color: #46474a;
        }

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }

        img {
            width: 978px;
            height: 550px;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding: 12px 16px;
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
    <style type="text/css">
        li.margin {
            margin-left: 50px;
        }
    </style>
    <style>
        h1 {
            text-shadow: 2px 2px #CCCCCC;
        }
    </style>
    <style>
        input[type=text] {
            width: 500px;
            box-sizing: border-box;
            border: 2px solid #EDEDED;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
            background-image: url('http://static.runoob.com/images/mix/searchicon.png');
            background-position: 10px 10px;
            background-repeat: no-repeat;
            padding: 8px 10px 8px 36px;
        }

        input[type=text]:focus {
            border: 2px solid #3D3D3D;
        }
    </style>
    <style>
        #powers {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            width: 100%;
            border-collapse: collapse;
        }

        #powers td, #powers th {
            font-size: 1em;
            border: 1px solid #282828;
            padding: 3px 7px 2px 7px;
        }

        #powers th {
            font-size: 1.1em;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #5E5E5E;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li class="margin"><img src="/static/images/logo.png" style="width: 87.4px;height: 50px;">
        </li>
        <li><a href="{% url 'purchase_index' %}">购物商城</a></li>
        <li><a href="/moment/">车友圈</a></li>
        <li><a href="/view_power/">充电规划</a></li>
        <li><a href="/chatbot/botmain/">智能客服</a></li>
        <li><a href="/repair/">维修保养</a></li>

        {% if "info" in request.session.keys %}
        <li class="dropdown">
            <a href="#">
                我的</a>
            <div class="dropdown-content">
                <a href="{% url 'show_order' %}" style="color: #46474a;font-size: 17px;">购物订单</a>
                <a href="/repair/list/" style="color: #46474a;font-size: 17px;">维修订单</a>
                <a href="/infomation/" style="color: #46474a;font-size: 17px;">个人信息</a>
                <a href="/signout/" style="color: #46474a;font-size: 17px;">注销</a>
            </div>
        </li>

        {% else %}
        <li><a href="/signin/">登录 / 注册</a></li>
        {% endif %}

    </ul>
</div>

<center>
    <div style="font-family:verdana;padding:20px;border-radius:10px;border:4px solid #4D4D4D;width:1200px;margin-top:70px">


        <div style="letter-spacing:24px;margin-top:50px"><h1>智能充电规划</h1></div>
        <div id="type" style="height: 200px;width: 1000px;margin-top:50px">
            <form action="" method="post">
                {% csrf_token %}
                <input type="text" name="address"><br>
            </form>
            <div style="color:#ADADAD;margin-top:50px"><h4>请在文本框中输入出发地点，回车刷新页面</h4></div>
            <div style="color:#ADADAD;"><h4>表格中显示离出发地点最近的20个充电桩，点击表头对表格进行排序</h4></div>
            <div style="color:#ADADAD;"><h4>选择合适的充电桩，点击“去这里”，查看智能路线规划方案</h4></div>
        </div>


        <div id="update" style="height: 400px;width: 1000px;margin-top:30px">
            <table border="1" id="powers">
                <tr>
                    <th id="th0" onclick="SortTable(this)" class="as">充电桩地址</th>
                    <th id="th1" onclick="SortTable(this)" class="as">充电桩空闲数</th>
                    <th id="th2" onclick="SortTable(this)" class="as">充电桩总数</th>
                    <th id="th3" onclick="SortTable(this)" class="as">充电桩类型</th>
                    <th id="th4" onclick="SortTable(this)" class="as">收费类型</th>
                    <th id="th5" onclick="SortTable(this)" class="as">驾车用时/分钟</th>
                    <th id="th6" onclick="SortTable(this)" class="as">驾车距离/公里</th>
                    <th id="th7" onclick="SortTable(this)" class="as">选择</th>
                </tr>
                {% for power in powers %}
                <tr>
                    <td name="td0">{{ power.address }}</td>
                    <td name="td1">{{ power.available_number }}</td>
                    <td name="td2">{{ power.total_number }}</td>
                    <td name="td3">{{ power.current_type }}</td>
                    <td name="td4">{{ power.ownership_type }}</td>
                    <td name="td5">{{ power.duration }}</td>
                    <td name="td6">{{ power.distance }}</td>
                    <td name="td7">
                        <a href="http://api.map.baidu.com/direction?origin=latlng:{{ current_latitude }},{{ current_longitude }}|name:{{ current_address }}&destination=latlng:{{ power.latitude }},{{ power.longitude }}|name:{{ power.address }}&mode=driving&region=北京&output=html&src=webapp.baidu.openAPIdemo"
                           target="_blank">去这里</a>
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>
    </div>
</center>

<footer id="footer" class="top-space" style="background-color:#46474a;color:#FFFFFF">

    <div class="footer1" style="margin-top:100px">
        <div class="container">
            <div class="row">

                <div class="col-md-3 widget">
                    <h3 class="widget-title">Contact</h3>
                    <div class="widget-body">
                        <p>+234 23 9873237<br>
                            <a href="mailto:#">some.email@somewhere.com</a><br>
                            <br>
                            234 Hidden Pond Road, Ashland City, TN 37015
                        </p>
                    </div>
                </div>

                <div class="col-md-3 widget">
                    <h3 class="widget-title">Follow me</h3>
                    <div class="widget-body">
                        <p class="follow-me-icons clearfix">
                            <a href=""><i class="fa fa-twitter fa-2"></i></a>
                            <a href=""><i class="fa fa-dribbble fa-2"></i></a>
                            <a href=""><i class="fa fa-github fa-2"></i></a>
                            <a href=""><i class="fa fa-facebook fa-2"></i></a>
                        </p>
                    </div>
                </div>

                <div class="col-md-6 widget">
                    <h3 class="widget-title">Text widget</h3>
                    <div class="widget-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, dolores, quibusdam
                            architecto voluptatem amet fugiat nesciunt placeat provident cumque accusamus itaque
                            voluptate modi quidem dolore optio velit hic iusto vero praesentium repellat commodi ad id
                            expedita cupiditate repellendus possimus unde?</p>
                        <p>Eius consequatur nihil quibusdam! Laborum, rerum, quis, inventore ipsa autem repellat
                            provident assumenda labore soluta minima alias temporibus facere distinctio quas adipisci
                            nam sunt explicabo officia tenetur at ea quos doloribus dolorum voluptate reprehenderit
                            architecto sint libero illo et hic.</p>
                    </div>
                </div>

            </div> <!-- /row of widgets -->
        </div>
    </div>

    <div class="footer2">
        <div class="container">
            <div class="row">

                <div class="col-md-6 widget">
                    <div class="widget-body">
                        <p class="simplenav">
                            <a href="#">Home</a> |
                            <a href="#">About</a> |
                            <a href="#">Sidebar</a> |
                            <a href="#">Contact</a> |
                            <b><a href="#">Sign up</a></b>
                        </p>
                    </div>
                </div>

                <div class="col-md-6 widget">
                    <div class="widget-body">
                        <p class="text-right">
                            Copyright &copy; 2014, Your name. Designed by <a href="http://gettemplate.com/"
                                                                             rel="designer">gettemplate</a>
                        </p>
                    </div>
                </div>

            </div> <!-- /row of widgets -->
        </div>
    </div>
</footer>

<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>

<script src="/static/js/headroom.min.js"></script>
<script src="/static/js/jQuery.headroom.min.js"></script>
<script src="/static/js/template.js"></script>


</body>
</html>

<script type="text/javascript">
    var tag = 1;

    function SortTable(obj) {
        var td0s = document.getElementsByName("td0");//得到id为td0的一串列表，下相同
        var td1s = document.getElementsByName("td1");
        var td2s = document.getElementsByName("td2");
        var td3s = document.getElementsByName("td3");
        var td4s = document.getElementsByName("td4");
        var td5s = document.getElementsByName("td5");
        var td6s = document.getElementsByName("td6");
        var td7s = document.getElementsByName("td7");
        var tdArray0 = [];
        var tdArray1 = [];
        var tdArray2 = [];
        var tdArray3 = [];
        var tdArray4 = [];
        var tdArray5 = [];
        var tdArray6 = [];
        var tdArray7 = [];
        for (var i = 0; i < td0s.length; i++) {
            tdArray0.push(td0s[i].innerHTML);
        }//每串都写到数组中
        for (var i = 0; i < td1s.length; i++) {
            tdArray1.push(td1s[i].innerHTML);
        }
        for (var i = 0; i < td2s.length; i++) {
            tdArray2.push(td2s[i].innerHTML);
        }
        for (var i = 0; i < td3s.length; i++) {
            tdArray3.push(td3s[i].innerHTML);
        }
        for (var i = 0; i < td4s.length; i++) {
            tdArray4.push(td4s[i].innerHTML);
        }
        for (var i = 0; i < td5s.length; i++) {
            tdArray5.push(td5s[i].innerHTML);
        }
        for (var i = 0; i < td6s.length; i++) {
            tdArray6.push(td6s[i].innerHTML);
        }
        for (var i = 0; i < td7s.length; i++) {
            tdArray7.push(td7s[i].innerHTML);
        }
        var tds = document.getElementsByName("td" + obj.id.substr(2, 1));
        //得到当前传入对象的那一列
        var columnArray = [];
        for (var i = 0; i < tds.length; i++) {
            columnArray.push(tds[i].innerHTML);
        }//当前那一列都写入column这个栈，是逆序的
        var orginArray = [];
        for (var i = 0; i < columnArray.length; i++) {
            orginArray.push(columnArray[i]);
        }//将这一列的内容再存储一遍，一会原来列表修改以后，
        //通过比对值的方式对应到当前行的内容，实现同行内容一起修改
        columnArray.sort();   //排序后的新值，只排序了当前列
        for (var i = 0; i < columnArray.length; i++) {
            for (var j = 0; j < orginArray.length; j++) {
                if (orginArray[j] == columnArray[i]) {
                    document.getElementsByName("td0")[i].innerHTML = tdArray0[j];
                    document.getElementsByName("td1")[i].innerHTML = tdArray1[j];
                    document.getElementsByName("td2")[i].innerHTML = tdArray2[j];
                    document.getElementsByName("td3")[i].innerHTML = tdArray3[j];
                    document.getElementsByName("td4")[i].innerHTML = tdArray4[j];
                    document.getElementsByName("td5")[i].innerHTML = tdArray5[j];
                    document.getElementsByName("td6")[i].innerHTML = tdArray6[j];
                    document.getElementsByName("td7")[i].innerHTML = tdArray7[j];
                    orginArray[j] = null;
                    break;
                }
            }
        }
    }
</script>
